<template>
  <el-divider
    style="margin-top: 51px; margin-bottom: 51px"
    content-position="center"
  >
    <p
      style="
        font-size: 20px;
        font-weight: normal;
        font-family: 'Courier New', Courier, monospace;
      "
    >
      百科知识分享
    </p>
  </el-divider>

  <div class="KnowledgeBody">
    <div class="flowerList">
        <div class="imageT">
            <img style="width: 100%;height: 100%;" src="@/assets/1.jpg"/>
        </div>
        <div flowerT>
            <div class="titleT">花百科介绍</div>
            <div class="textT">花百科是一个专门为用户提供鲜花洋细信息的页面。用户可以通过该页面进行搜索查询，了解该花的花语、别称、适应季节、产地等等,以便更好地了解和掌握花卉知识。在花百科页面上,我们会提供尽可能详尽、准确的鲜花信息,并同时提供图片展示,方便用户进行直观的了解和比较。同时,用户也可以根据花卉知识选择合适的花进行购买,从而达到更 好的购买体验和满足需求的目的。</div>
        </div>
      
    </div>
    
    <div class="KnowledgeContainer">
      <div class="smallTar">
        <div class="titleT">百科涵盖</div>
        <div class="textT">
            <ul>
                <li>名称——提供鲜花的正式名称以及可能存在的别名。</li>
                <li>产地——指明鲜花的原产地或主要生长地区。</li>
                <li>适应季节——说明鲜花在哪个季节或季节范围内生长和盛开最为适宜。</li>
                <li>温度要求——描述鲜花对环境温度的适应性，包括最佳温度范围和极端温度的耐受性。</li>
                <li>水分要求——介绍鲜花对水分的需求量和浇水频率。</li>
                <li>种植要求——说明鲜花的种植要求，包括土壤类型、肥料使用和阳光照射等因素。</li>
                <li>施肥——指导如何正确施肥，包括施肥时间、肥料种类和施肥量。</li>
                <li>浇水——提供关于浇水的建议和注意事项，以保持鲜花的健康生长。</li>
                <li>光线——说明鲜花对光线的要求，包括光照强度和日照时间。</li>
                <li>防护措施——介绍保护鲜花免受病虫害、气候变化或其他不利条件的措施和建议。</li>

            </ul>
        </div>
      </div>
      <bottom class="moreFlower">查看更多</bottom>
      <input type="radio" name="select" id="slide_1" checked hidden />
      <input type="radio" name="select" id="slide_2" hidden />
      <input type="radio" name="select" id="slide_3" hidden />
      <input type="radio" name="select" id="slide_4" hidden />
      <div class="slider">
        <label for="slide_1" class="slide slide-1"></label>
        <label for="slide_2" class="slide slide-2"></label>
        <label for="slide_3" class="slide slide-3"></label>
        <label for="slide_4" class="slide slide-4"></label>
      </div>
      <div class="KnowledgeCard KnowledgeCard-1">
        <div class="img">
          <img :src="this.KnowledgeList[0].image" alt="" />
        </div>
        <div class="content">
          <div class="title">{{ this.KnowledgeList[0].name }}</div>
          <div class="text">
            <div class="text1">
              光照要求:{{ this.KnowledgeList[0].sunshine }}
            </div>
            <div class="text1">种植要求：{{ this.KnowledgeList[0].plant }}</div>
          </div>
        </div>
      </div>
      <div class="KnowledgeCard KnowledgeCard-2">
        <div class="img">
          <img :src="this.KnowledgeList[1].image" alt="" />
        </div>
        <div class="content">
          <div class="title">{{ this.KnowledgeList[1].name }}</div>
          <div class="text">
            <div class="text1">
              光照要求:{{ this.KnowledgeList[1].sunshine }}
            </div>
            <div class="text1">种植要求：{{ this.KnowledgeList[1].plant }}</div>
          </div>
        </div>
      </div>
      <div class="KnowledgeCard KnowledgeCard-3">
        <div class="img">
          <img :src="this.KnowledgeList[2].image" alt="" />
        </div>
        <div class="content">
          <div class="title">{{ this.KnowledgeList[2].name }}</div>
          <div class="text">
            <div class="text1">
              光照要求:{{ this.KnowledgeList[2].sunshine }}
            </div>
            <div class="text1">种植要求：{{ this.KnowledgeList[2].plant }}</div>
          </div>
        </div>
      </div>
      <div class="KnowledgeCard KnowledgeCard-4">
        <div class="img">
          <img :src="this.KnowledgeList[3].image" alt="" />
        </div>
        <div class="content">
          <div class="title">{{ this.KnowledgeList[3].name }}</div>
          <div class="text">
            <div class="text1">
              光照要求:{{ this.KnowledgeList[3].sunshine }}
            </div>
            <div class="text1">种植要求：{{ this.KnowledgeList[3].plant }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRandomFlowerKnowledgeList } from "@/api/flowerKnowledge";
export default {
  data() {
    return {
      KnowledgeList: [
        {
          name: "",
          image: "",
          sunshine: "",
          plant: "",
          url: "",
        },
        {
          name: "",
          image: "",
          sunshine: "",
          plant: "",
          url: "",
        },
        {
          name: "",
          image: "",
          sunshine: "",
          plant: "",
          url: "",
        },
        {
          name: "",
          image: "",
          sunshine: "",
          plant: "",
          url: "",
        },
      ],
    };
  },
  methods: {
    getRandomFlowerKnowledge() {
      var params = {
        count: Number(4),
      };
      return getRandomFlowerKnowledgeList(params)
        .then((response) => {
          var getData = response.data.data;
          for (var knowledge in getData) {
            this.KnowledgeList[knowledge].name = getData[knowledge].name;
            this.KnowledgeList[knowledge].image = getData[knowledge].picture;
            this.KnowledgeList[knowledge].sunshine =
              getData[knowledge].sunshine;
            this.KnowledgeList[knowledge].plant = getData[knowledge].plant;
            //this.KnowledgeList[knowledge].url=
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted: function () {
    this.getRandomFlowerKnowledge();
  },
};
</script>

<style scoped>
.KnowledgeBody {
  height: 550px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30px;
  background: linear-gradient(270deg, #c4565638, #f5ffca73);
}
.KnowledgeContainer {
  width: 100vw;
  max-width: 720px;
    height: 280px;
  position: relative;
  background-color: #d0ada1de;
  margin-top: auto;
}
.KnowledgeCard {
  display: flex;
  align-items: center;
  width: 100%;
  height: 350px;
  padding-left: 30px;
  position: absolute;
  overflow: hidden;
}
.KnowledgeCard .img {
    width: 210px;
    height: 175px;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: -74px;
}

.KnowledgeCard .img img {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.6s;
}
#slide_1:checked ~ .KnowledgeCard-1 img,
#slide_2:checked ~ .KnowledgeCard-2 img,
#slide_3:checked ~ .KnowledgeCard-3 img,
#slide_4:checked ~ .KnowledgeCard-4 img {
  opacity: 1;
  transition-delay: 0.2s;
}
.KnowledgeCard .content {
  position: relative;
  left: 50px;
  opacity: 0;
  width: 495px;
  height: 330px;
  margin-left: 15px;
}
#slide_1:checked ~ .KnowledgeCard-1 .content,
#slide_2:checked ~ .KnowledgeCard-2 .content,
#slide_3:checked ~ .KnowledgeCard-3 .content,
#slide_4:checked ~ .KnowledgeCard-4 .content {
  opacity: 1;
  left: 0;
  transition-delay: 0.3s;
}

.KnowledgeCard .title {
  font-size: 30px;
  font-weight: 700;
  margin-top: 26px;
  color: white;
}

.KnowledgeCard .text1 {
  font-size: 15px;
  padding-top: 10px;
  color: #695b5b;
  font-family: cursive;
}
.KnowledgeCard .text {
  width: 457px;
  height: 205px;
}

.slider {
  position: absolute;
  bottom: 22px;
  left: 55%;
  transform: translate(-50%);
  z-index: 1;
}

.slider .slide {
  width: 45px;
  height: 10px;
  background-color: #dfdfdf;
  display: inline-flex;
  margin: 0 3px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.slider .slide::before {
  content: "";
  width: 0%;
  height: 100%;
  background-color: #966666;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(0);
  transform-origin: left;
  transition: transform 0.6s;
}

#slide_1:checked ~ .slider .slide-1::before,
#slide_2:checked ~ .slider .slide-2::before,
#slide_3:checked ~ .slider .slide-3::before,
#slide_4:checked ~ .slider .slide-4::before {
  width: 100%;
  transform: scale(1);
}
.flowerList {
  width: 300px;
  height: 446px;
}
.imageT{
        width: 300px;
    height: 190px;
}


.titleT{
    font-size: 20px;
    font-weight: bold;
    font-family: cursive;
    margin: 10px;
}
.textT{
    font-size: 15px;
    font-family: fangsong;
    padding: 5px;
}

.smallTar{
    width: 688px;
    height: 88px;
    position: absolute;
    margin-top: -258px;
    margin-left: 0px;
}
.moreFlower{
    position: absolute;
    margin-left: 600px;
    margin-top: 230px;
    background-color: #ffeacf;
    width: 77px;
    height: 33px;
    text-align: center;
    line-height: 33px;
    border-radius: 18px;
    color: #966666;
    font-weight: 500;
    font-family: cursive;
    cursor: pointer;
}
</style>